<template>
	<view class="actionlog">
		<u-row v-for="(v, k) in list" :key="k">
			<u-col span="5" class="datetime text-right">
				<text class="date">{{ v.date }} {{ v.week }}</text>
				<text class="time">{{ v.time }}</text>
			</u-col>
			<u-col span="1" class="point">
				<text class="dot"></text>
			</u-col>
			<u-col span="6" class="action">
				<text class="user">{{ v.realname }}</text>
				<text class="log" v-for="(sv, sk) in v.content" :key="sk">{{ sv }}</text>
			</u-col>
		</u-row>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	name: 'actionLog',
	props: {
		id: {
			type: [String, Number],
			default() {
				return 5;
			},
		},
		type: {
			type: [String, Number],
			default() {
				return 0;
			},
		},
	},
	data() {
		return {
			list: [],
		};
	},
	mounted() {
		this.getActionLog();
	},
	methods: {
		// 获取操作记录
		async getActionLog() {
			let data = {
				types: this.type,
				actionId: this.id,
			};
			let res = await this.$api.customer.common.showActionLog(data);
			if (res.code === 200) {
				let list = res.data || [];
				this.list = list.map((item) => {
					let d = dayjs(item.createTime);
					item.date = d.month() + 1 + '-' + d.date();
					item.week = '星期' + '日一二三四五六'.charAt(d.day());
					item.time = d.hour() + ':' + ('0' + d.minute()).slice((d.minute() + '').length - 1);

					return item;
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.actionlog {
	position: relative;
	padding: 30rpx;
	&:after {
		content: '';
		position: absolute;
		left: 45.788%;
		top: 18px;
		bottom: 0;
		width: 1px;
		background: #e5e9eb;
		transform: scaleX(0.5);
	}
	.u-row {
		margin: 10px 0;
	}
	.date,
	.time,
	.user,
	.log {
		display: block;
	}

	.time,
	.log {
		font-size: 14px;
		color: $uni-text-color-grey;
	}

	.point {
		position: relative;
		text-align: center;
		z-index: 2;
		.dot {
			display: block;
			margin: 0 auto;
			width: 11px;
			height: 11px;
			background: #fff;
			border: 3px solid $uni-color-primary;
			border-radius: 11px;
		}
	}
}
</style>